<template>
  <!-- 开启顶部安全区适配 -->
  <NavBar safe-area-inset-top @click-left="toggleMenu">
    <template #left>
      <Icon name="wap-nav" size="24" :color="menuCollapsed ? '#fff' : '#1668a7'" />
    </template>
    <template #title>{{ navTitle }}</template>
  </NavBar>
  <layout :class="'collapse-menus'">
    <template #header>
      <Menu v-model="menuCollapsed" />
    </template>
    <router-view></router-view>
  </layout>
  <Tabbar safe-area-inset-bottom route>
    <TabbarItem icon="home-o" to="/">首页</TabbarItem>
    <TabbarItem icon="chart-trending-o" :to="{ path: '/shares/list' }">股票</TabbarItem>
    <TabbarItem icon="points" :to="{ path: '/dbs' }">数据库</TabbarItem>
    <TabbarItem icon="setting-o" :to="{ path: '/settings' }">设置</TabbarItem>
  </Tabbar>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { NavBar, Icon, Tabbar, TabbarItem } from 'vant';

  import Menu from '@/components/layout/Menu.vue';

  const navTitle = ref('');
  const menuCollapsed = ref(true);

  function toggleMenu() {
    menuCollapsed.value = !menuCollapsed.value;
  }

  onMounted(() => {
    navTitle.value = window.settings.title;
  });
</script>
